<template>
  <div class="shopping">
    <div class="shop-nav clearfix"><span class="tt">购物车</span> <span class="edit" v-on:click="editokFn">完成</span></div>
    <div class="have-shop" v-if="haveshop">
      <div class="list-box" >

        <div class="li clearfix" v-for="(item,index) in products">
          <div class="fl-div">
            <span class="ico-check check-pub" v-on:click="checkFn(index)"></span>
          </div>
          <div class="fc-div clearfix">
            <a v-on:click="redirect('/shop/details/'+item.produt_id)">
              <div class="left img">
                <img :src="item.thumb" alt="">
              </div>
              <div class="left font">
                <div class="a-tt">{{item.name}}</div>
                <div class="a-pr">{{item.price}}</div>
              </div>
            </a>
          </div>
          <div class="fr-div">
            x1
          </div>
        </div>

      </div>

      <div class="check-buy ">
        <div class="clearfix buy-box">
          <span class="ico-check" id="checkAll" v-on:click="checkAllFn"></span>
          <span>全选</span>
          <div class="fr">
            <span class="btn-fenxiang" v-on:click="redirect('/me/sharepage?ids='+productId+'&name='+name)">分享</span>
            <!--<span class="btn-shoucang" v-on:click="openToast">收藏</span>-->
            <span class="btn-delete" v-on:click="openConfirm">删除</span>
          </div>
        </div>
        <foot-guide></foot-guide>
      </div>
    </div>

    <div class="no-have-shop" v-if="!haveshop">
      <div class="no-box">
        <div>您的购物袋中还没有商品！</div>
        <div class="btn-box">
          <a href="#" class="go-btn">再去逛逛</a>
        </div>
      </div>
      <foot-guide></foot-guide>
    </div>

  </div>
</template>


<script>
  import { Toast,MessageBox } from 'mint-ui';
  import footGuide from '../../components/footGuide'

  export default {
    name: 'Shopping',
    data () {
      return {
        haveshop:false,
        products:[],
        checknum:'',
        productId:'',
        cardId:'',
        totalPrice:0,
        name:''
      }
    },
    filters:{      //数据过滤器
      format:function(value){

        return value;

      }

    },
    mounted:function(){
      this.initData();
      this.name = sessionStorage.user && JSON.parse(sessionStorage.user).name;

    },
    components: {
      footGuide
    },
    methods: {
      initData:function(){
        var _this = this;
        var checkoutCartData = {};
        checkoutCartData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        $.ajax({
          type:'post',
          url: RouteMap.checkoutCart,
          data:checkoutCartData,
          success:function(res){
            if(res.code == 200){
              if(res.data.products.length>0){
                _this.haveshop = true;
                _this.products = res.data.products;
                _this.checknum = _this.products.length;
                var tempid = [];
                var tempcardid = [];
                var tempTotalPrice=0;
                for(var i=0;i<_this.products.length;i++){

                  //添加是否选中的状态
                  _this.products[i]['ischecked'] = true;

                  tempid.push(_this.products[i].produt_id)
                  tempcardid.push(_this.products[i].cart_id);

                  console.log(_this.products[i].price.replace('￥',''))
                  tempTotalPrice += Number(_this.products[i].price.replace('￥','').replace(',',''))
                }
                _this.productId = tempid.join(',');
                _this.cardId = tempcardid.join(',');
//                alert(_this.cardId)
                console.log(_this.productId)
                _this.totalPrice = tempTotalPrice

              }
            }
            else{
              Toast(res.msg)
            }
          }
        })
      },
      tobuy:function () {
        this.$router.push('/me/order?productId='+this.productId)
      },
      checkAllFn:function(){

        var currentObj = $('#checkAll');
        currentObj.addClass('ico-check')
        currentObj.removeClass('ico-checked')

        this.totalPrice = 0
        var tempIdArr = [];
        var tempcareIdArr = [];
        for(var i=0;i<$('.check-pub').length;i++){

          $('.check-pub').eq(i).addClass('ico-check');
          $('.check-pub').eq(i).removeClass('ico-checked')

          if($('.check-pub').eq(i).hasClass('ico-check')){

            this.totalPrice += Number(this.products[i].price.replace('￥','').replace(',',''));
            tempIdArr.push(this.products[i].produt_id);
            tempcareIdArr.push(this.products[i].cart_id);

          }
        }
        this.productId = tempIdArr.join(',');
        this.cardId = tempcareIdArr.join(',');
        console.log(this.productId)
      },
      checkFn:function(index){
        var currentObj = $('.check-pub').eq(index);
        if(currentObj.hasClass('ico-check')){
          currentObj.removeClass('ico-check')
          currentObj.addClass('ico-checked')

        }
        else{
          currentObj.addClass('ico-check')
          currentObj.removeClass('ico-checked')
        }

        this.totalPrice = 0
        var tempIdArr = [];
        var tempcareIdArr = [];
        for(var i=0;i<$('.check-pub').length;i++){

          if($('.check-pub').eq(i).hasClass('ico-check')){

            this.totalPrice += Number(this.products[i].price.replace('￥','').replace(',',''));
            tempIdArr.push(this.products[i].produt_id);
            tempcareIdArr.push(this.products[i].cart_id);
          }
        }

        this.productId = tempIdArr.join(',');
        this.cardId = tempcareIdArr.join(',');
        console.log(this.productId)

        if(tempIdArr.length == this.products.length){

          $('#checkAll').addClass('ico-check')
          $('#checkAll').removeClass('ico-checked')
        }
        else{

          $('#checkAll').removeClass('ico-check')
          $('#checkAll').addClass('ico-checked')
        }

      },
      redirect:function(url){
        this.$router.push(url);
      },
      editokFn:function(){

        this.$router.push('/me/shopping');
      },
      openToast:function(){

      },
      openConfirm:function(){

        var _this = this;

        MessageBox.confirm('确定执行此操作?', '提示').then(action => {

          this.delFn(this.cardId)

        });
      },
      delFn:function(id){
        var _this = this;
        setTimeout(function(){
          var ajaxData = {};
          ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
          ajaxData.key = id
          $.ajax({
            type:'post',
            url: RouteMap.cardRemove,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){
                Toast('删除成功');
//                _this.initData();
                setTimeout(function(){
                  window.location.reload();
                },1000)
              }
              else{
                Toast(res.msg)
              }
            }
          })
        })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopping{
    padding-bottom: 6rem;
  }
  .shop-nav{
    text-align: center;
    font-size: .7rem;
    position: relative;
    padding: .5rem;
    border-bottom: 1px solid #c2c2c2;
  }
  .edit {
    position: absolute;
    right: .5rem;
    font-size: .6rem;
  }
  .ico-check{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/check.png");
    background-size: 100% 100%;
  }
  .ico-checked{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/checked.png");
    background-size: 100% 100%;
  }

  .list-box{

  }
  .list-box .li{
    padding: .5rem;
    font-size: .6rem;
    border-bottom: 1px solid #c2c2c2;
    display:-webkit-box;
    justify-content: space-between;
    color: #707070;
  }
  .list-box .li a{
    color: #707070;
  }
  .list-box .shixiao{
    color: #c2c2c2;
  }
  .list-box .shixiao a{
    color: #c2c2c2;
  }
  .list-box .li .fl-div{
    width: 1.5rem;
  }
  .fl-div span{
    display: inline-block;
    margin-top: 1.4rem;
  }
  .list-box .li .fc-div{
    width: 11rem;
  }
  .list-box .li .fr-div{
    width: 2rem;
    text-align: right;
    padding-top: 1.5rem;

  }
  .list-box .li .left img{ width:3rem }
  .fc-div .img{
    width: 3rem;
  }
  .fc-div .font{
    width: 7.5rem;
    margin-left: .5rem;
    margin-top: .5rem;
  }
  .overdue{
    background: #f5f5f5;
    border-radius: .2rem;
    padding: .1rem .1rem;
    font-size: .5rem;
  }
  .clear-box{
    text-align: center;
    padding-top: .5rem;
  }
  .clear-box .clear{
    display: inline-block;
    background: #f5f5f5;
    color: #707070;
    padding: .2rem .8rem;
    border-radius: .4rem;
  }

  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img img{
    width: 100%;
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

  .check-buy{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f5f5f5;
  }
  .buy-box{
    padding: 0 .7rem;
    border: 1px solid #707070;
    height: 2rem;
  }
  .buy-box span{
    display: inline-block;
    vertical-align: middle;
    margin-top: .5rem;
  }
  .buy-box .val{
    color:#b01f24;
    font-size: .7rem;
  }
  .buy-box .buy{
    float: right;
    background: #b01f24;
    color: #fff;
    padding: .2rem .5rem;
    margin-top: .4rem;
    border-radius: .3rem;
    box-shadow: 1px 1px 10px #888888;
  }
  .buy-box .fr span{
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border: 1px solid #c35a5d;
    color: #c35a5d;
    border-radius: .3rem;
    margin-top: .3rem;
  }
  .no-box{
    color: #707070;
    text-align: center;
    margin-top: 6rem;
    font-size: .6rem;
  }
  .btn-box{
    margin-top: .7rem;
  }
  .go-btn{
    border: 1px solid #b01f24;
    border-radius: .7rem;
    color: #b01f24;
    padding: .2rem .7rem;
  }


</style>
